<template>
    <el-form class="xFbgaudioProps">
        <div class="setting-pannel-wrap">
            <div class="file-list" v-if="tempValue.length > 0">
                <div v-for="(item, index) in tempValue" :key="index" @mouseenter="showId = item.id" @mouseleave="showId = 0">
                    <div class="item" :style="getStyle(item.cover, 4)">
                        <div
                            style="background-color: rgba(0,0,0,.6); height: 20px; line-height: 20px; width: 100%; color: white; bottom: 0px; left: 0px; font-size: 12px; position: absolute;"
                        >
                            {{ item.fileName }}
                        </div>
                        <div class="tool-list" v-show="item.id === showId"><i class="iconfont icon-delete" @click="del(index)"></i></div>
                    </div>
                </div>
            </div>
            <add-assets @before-open="_beforeOpen" :size="{ width: 250, height: 140 }" v-bind="{ pannelName: 'audio' }" />
        </div>
    </el-form>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import AddAssets from '@/components/program-editor/add-assets';
import uploadMixin from '@/mixins/assets-upload-mixin';
export default {
    name: 'setting-audio-bg',
    components: {
        AddAssets
    },
    props: {
        bgAudioList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            tempValue: [],
            showId: 0
        };
    },
    watch: {
        bgAudioList(v1, v2) {
            if (JSON.stringify(v1) === JSON.stringify(v2)) {
                return;
            }
            this.initData();
        },
        tempValue() {
            this.change();
        }
    },
    mixins: [uploadMixin],
    created() {
        this.initData();
    },
    computed: {
        ...mapGetters('programs', ['currScene', 'getCurrElementUUID'])
    },
    methods: {
        ...mapActions('programs', ['deleteElment', 'setCurrentElement']),
        initData() {
            let list = [];
            this.bgAudioList.forEach(item => {
                list.push(item);
            });
            this.tempValue = list;
        },
        getResultList() {
            let list = [];
            for (let i = 0, len = this.tempValue.length; i < len; i++) {
                list.push(this.tempValue[i]);
            }
            return list;
        },
        change() {
            this.$emit('update:bgAudioList', this.getResultList());
        },
        del(index) {
            this.setCurrentElement();
            this['deleteElment']();
        },
        _beforeOpen() {
            this.setCurrentElement();
            this.beforeOpen({
                cid: 4,
                limit: 1,
                propName: {
                    propsValue: 'bgAudioList'
                },
                selected: [...this.bgAudioList]
            });
        }
    }
};
</script>

<style lang="scss" scoped></style>
